<template>
  <div class="ccui-app-container">
    <div
      class="ccui-advanced-search-wrapper ccui-clearfix"
      ref="advancedSearchWrapper"
    >
      <div class="ccui-search-wrapper">
        <div class="ccui-tab-wrapper">
          <el-button type="table-top-active" size="mini">流程定义</el-button>
        </div>
      </div>

      <!--表格区域Begin-->
      <div class="ccui-multifunctional-table-wrapper">
        <el-table
          :data="tableMoudle.list"
          border
          :max-height="tableMaxHeight"
          style="width: 100%"
          highlight-current-row
        >
          <el-table-column
            fixed="left"
            type="index"
            :index="indexMethod"
            label="序号"
          >
          </el-table-column>
          <template v-for="(table, index) in tableMoudle.formItem">
            <el-table-column
              :fixed="table.fixed"
              :min-width="table.minWidth"
              :key="index"
              :label="table.label"
              :width="table.width"
              :prop="table.prop"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <div
                  :class="
                    table.prop === 'versionSign' &&
                    scope.row['currentState'] === 1
                      ? 'ellipsis unModify'
                      : 'ellipsis'
                  "
                >
                  {{ scope.row[table.prop] }}
                </div>
              </template>
            </el-table-column>
          </template>
          <el-table-column label="操作" fixed="right" width="70">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleEdit(scope.$index, scope.row)"
                >配置
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--表格区域End-->
    </div>
  </div>
</template>

<script>
// import getPower from "../mixins/getPower.js";
import { processDefineList } from "../api/utils";

import { addUrlPerFix } from "@/basa/utils";
const workspaceUrl = addUrlPerFix(process.env.VUE_APP_BASE_URL);
export default {
  name: "templatePrecess",
  // mixins: [getPower],
  components: {},
  data() {
    return {
      requestSeachParams: {
        flag: 2,
        pageNo: 1,
        pageSize: 20
      },
      isShowAddButton: true,
      leftLevelBelowisShow: true,
      tableMaxHeight: "0",
      pzUrl: "",
      newBuiltData: {
        dialogVisible: false,
        title: "新建流程",
        partyId: ""
      },
      searchMoudle: {
        // 搜索模块数据
        isShow: false,
        searchData: {
          label: "流程名称：",
          placeholder: "请输入流程名称模糊查询",
          name: "processDisplayName"
        },
        inputSingle: "",
        input: "",
        value: "" // 简单搜索End
      },
      tableMoudle: {
        list: [],
        pageNo: 1,
        pageSize: 10,
        totalNum: 0,
        formItem: [
          {
            label: "适用项目",
            prop: "extend4",
            width: "auto",
            minWidth: "120",
            checked: true,
            fixed: "left"
          },
          {
            label: "审批业务",
            prop: "extend9",
            width: "90",
            minWidth: false,
            checked: true,
            fixed: false
          },
          {
            label: "审批类型",
            prop: "extend6",
            width: "90",
            minWidth: false,
            checked: true,
            fixed: false
          },
          {
            label: "流程名称",
            prop: "processDefCHName",
            width: "auto",
            minWidth: false,
            checked: true,
            fixed: false
          },
          {
            label: "流程ID",
            prop: "processDefNameSpecial",
            width: "160",
            minWidth: false,
            checked: true,
            fixed: false
          },
          {
            label: "生效日期",
            prop: "lastModifyTime",
            width: "130",
            minWidth: false,
            checked: true,
            fixed: false
          },
          {
            label: "版本号",
            prop: "versionSign",
            width: "60",
            minWidth: false,
            checked: true,
            fixed: false
          } // 有未生效版本号则红色高亮显示
        ]
      },
      tableBaseListParam: {
        organizationId: "",
        processDisplayName: ""
      },
      tableListParam: {},
      tableData: [],
      isShow: false
    };
  },

  beforeRouteLeave(to, from, next) {
    if (to.name !== "techProcess-processAdd") {
      this.delSession();
      next();
    }
    // 设置下一个路由的 meta
    to.meta.keepAlive = false; // 让 A 不缓存，即刷新
    next();
  },
  mounted() {
    // this.getPower("techProcess-processAdd");
    console.log(window.location.search);
    this.a = window.location.search;
    this.pzUrl = window.location.host + "/po";
    //console.log(this.pzUrl)
    let selectedTree = sessionStorage.selectedTree;
    selectedTree && this.handleSelect(JSON.parse(selectedTree));
    window.changeTheRecord = this.getArecord;
    // 自动获取表格高度
    this.$nextTick(() => {
      this.computeTableHeight();
    });
    // // 浏览器调整大小时，表格高度实时改变
    window.onresize = () => {
      this.computeTableHeight();
    };
  },
  created() {
    this.getProcessDefineList();
    window.addEventListener("unload", function() {
      sessionStorage.removeItem("selectedTree");
      sessionStorage.removeItem("seachResult");
      sessionStorage.removeItem("newSeachData");
      sessionStorage.removeItem("oldSeachData");
    });
  },
  methods: {
    //过滤用户
    delSession() {
      sessionStorage.removeItem("selectedTree");
      sessionStorage.removeItem("seachResult");
      sessionStorage.removeItem("newSeachData");
      sessionStorage.removeItem("oldSeachData");
    },
    handleSelect(item) {
      console.log(item);
      this.leftLevelBelowisShow = false;
      this.$nextTick(() => {
        this.leftLevelBelowisShow = true;
      });
      this.slectOrgSuccess(item);
    },
    getArecord() {
      this.getProcessDefineList();
    },
    indexMethod(index) {
      // 序号
      return index * this.tableMoudle.pageNo + 1;
    },
    slectOrgSuccess(obj) {
      /** 取入参**/
      console.log(obj);
      this.tableListParam.partyIdPath = obj.autoCode;
      this.tableListParam.processDisplayName = "";
      this.searchMoudle.isShow = !this.searchMoudle.isShow; // 重载搜索框
      this.newBuiltData.partyId = obj.partyId;
      if (
        obj.parentId !== undefined &&
        obj.parentId !== null &&
        obj.parentId !== ""
      ) {
        this.tableListParam.organizationId = obj.partyId;
      } else {
        this.tableListParam.organizationId = obj.groupId;
      }
      console.log(this.tableListParam.organizationId);
      this.getProcessDefineList();
    },
    newBuiltSuccess() {
      // 新建流程成功后重新请求
      this.tableListParam.processDisplayName = "";
      this.getProcessDefineList();
    },
    // addProcess() {
    //   this.$router.push("/techProcess/processAdd/" + this.newBuiltData.partyId);
    // },
    getProcessDefineList() {
      // 请求流程定义列表
      console.log(this.tableListParam);
      let obj = {};
      obj = {
        projectId: 100099,
        projectUnitOrgId: 100008,
        projectUnitPartyIdPath: 100001 - 100008 - 100099,
        // baseAppId: 100114,
        // organizationId: 100003,
        partyIdPath: "100003-",
        processDisplayName: ""
      };
      this.tableListParam.isShowPageLoading = true;
      processDefineList(obj)
        .then(res => {
          let data = res.data.data;
          console.log(data);
          this.tableMoudle.list = data;
          console.log("成功");
        })
        .catch(e => {
          console.log(e);
        });
    },
    getList() {
      this.getProcessDefineList();
    },
    onSubmitSingle(obj) {
      this.tableListParam.processDisplayName = obj.processDisplayName;
      this.getList();
    },
    tabChange(index) {
      console.log(index);
      this.isActive = index;
      let tabCardCollection = document.querySelectorAll(".tab-card");
      let len = tabCardCollection.length;
      for (let i = 0; i < len; i++) {
        tabCardCollection[i].style.display = "none";
      }
      tabCardCollection[index].style.display = "block";
    },
    handleEdit(index, row) {
      console.log(row);
      // 参数
      let replaceUrl = this.pzUrl;
      console.log(replaceUrl);
      let hasForm = false;
      let locale = "zh_CN";
      let processDefID = row.processDefID || ""; // 流程id
      let catalogUUID = row.catalogUUID || "";
      let processDefName = row.processDefName || ""; // 流程名称
      let processDefCHName = row.processDefCHName || ""; // 流程中文名称
      let description = row.description || "";
      let extend3 = row.extend3 || "";
      let extend4 = row.extend4 || "";
      let extend5 = row.extend5 || "";
      let extend6 = row.extend6 || "";
      let extend8 = row.extend8 || "";
      let extend9 = row.extend9 || "";
      let extend10 = row.extend10 || "";
      let extend11 = row.extend11 || "";
      let author = row.author || "";
      let editType = row.editType || "custom";
      let mdfState = row.modifyState === "9" ? "9" : "1";
      console.log(workspaceUrl);

      let openId = JSON.parse(localStorage.userInfo).openId;

      console.log(replaceUrl);
      var url =
        workspaceUrl +
        "/workspace/workflow/bps_composer/flex/bizProcessCustomDg.jsp?hasForm=" +
        hasForm +
        "&locale=" +
        locale +
        "&processDefID=" +
        processDefID +
        "&catalogUUID=" +
        catalogUUID +
        "&processDefName=" +
        processDefName +
        "&processDefCHName=" +
        processDefCHName +
        "&description=" +
        description +
        "&extend3=" +
        extend3 +
        "&extend4=" +
        extend4 +
        "&extend5=" +
        extend5 +
        "&extend6=" +
        extend6 +
        "&extend8=" +
        extend8 +
        "&extend9=" +
        extend9 +
        "&extend10=" +
        extend10 +
        "&extend11=" +
        extend11 +
        "&author=" +
        author +
        "&editType=" +
        editType +
        "&mdfState=" +
        mdfState +
        "&url=" +
        replaceUrl +
        "&openId=" +
        openId +
        this.a.replace("?", "&");
      // 转向网页的地址;
      var name = "add"; // 网页名称，可为空;
      var iWidth = window.screen.availWidth * 0.5; // 弹出窗口的宽度;
      var iHeight = window.screen.availHeight * 0.5; // 弹出窗口的高度;
      // 获得窗口的垂直位置
      var iTop = (window.screen.availHeight - 30 - iHeight) / 2;
      // 获得窗口的水平位置
      var iLeft = (window.screen.availWidth - 10 - iWidth) / 2;
      console.log(url);
      window.open(
        url,
        name,
        "height=" +
          iHeight +
          ",,innerHeight=" +
          iHeight +
          ",width=" +
          iWidth +
          ",innerWidth=" +
          iWidth +
          ",top=" +
          iTop +
          ",left=" +
          iLeft +
          ",status=no,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=0,titlebar=no"
      );
      console.log("handleEdit");
    },
    // 计算表格高度方法
    computeTableHeight() {
      // 获取表格所占区域的总高度
      let appContainerHeight = document.documentElement.clientHeight - 200;
      // 减去为表格所占高度，-70为距底边留白区域
      this.tableMaxHeight =
        appContainerHeight - 40 > 0 ? appContainerHeight - 40 : 0;
      console.log("减去为表格所占高度", this.tableMaxHeight);
    }
  }
};
</script>

<style scoped lang="scss">
// @import "../../styles/variables.scss";
/deep/ .tab-wrapper .el-button + .el-button {
  margin-left: 30px;
}

.unModify {
  color: red;
  // color: $--color-unmodify;
}

.multifunctional-table-wrapper {
  .active {
    color: red;
    // color: $--color-unmodify;
  }
}
.seachStyle {
  width: 220px;
  margin: 10px 20px 14px;
}

.el-process-defintion {
  position: relative;
  .el-process-tree {
    position: absolute;
    top: 0;
    left: 0;
    height: calc(100vh - 160px);
    width: 260px;
    background-color: white;
  }
  .el-process-tree-title {
    font-size: 13px;
    font-weight: bold;
    color: red;
    // color: $--color-text-primary;
    line-height: 18px;
    padding: 10px 20px 0 20px;
  }
  .el-process-tree-main {
    padding: 0 20px;
    height: calc(100vh - 208px);
    overflow: auto;
  }
  .el-process-main {
    margin-left: 280px;
    background-color: white;
    padding: 15px 20px 20px 20px;
    height: calc(100vh - 195px);
  }
}
/deep/.ccui-main-wrapper {
  padding: 20px 50px 0 50px;
}
/deep/ .multifunctional-table-wrapper .el-table .el-table__body-wrapper {
  overflow: auto;
}
</style>
